<template>
  <div class="position-main trade-cancelquery-page">
    <checkbox :checkStatus="checkStatus"></checkbox>
    <toggle-tab style="z-index: 98" :leftText="left" :rightText="right" :dis="menuFlag"/>    <!-- dis用来控制tab的样式 -->
    <stock-grid v-if="menuFlag=='1'" :checkStatus="checkStatus"></stock-grid>
    <!--根据menuFlag的值来决定应该渲染哪个tab-->
    <group-grid v-if="menuFlag=='2'" :checkStatus="checkStatus"></group-grid>
  </div>
</template>

<script>
  import checkbox from '../checkbox'
  import ToggleTab from '../ToggleTab'
  import stockGrid from 'components/trade/cancel/stockGrid'
  import groupGrid from 'components/trade/cancel/groupGrid'
  import LoadMore from 'components/LoadMore'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import CommonUtil from 'common/common.util'
  export default{
    components: {
      /*子组件*/
      checkbox,
      'toggle-tab': ToggleTab,
      'gj-loadmore': LoadMore,
      'stock-grid': stockGrid,
      'group-grid': groupGrid
    },
    data(){                                                                               /*初始化data*/
      return {
        menuFlag: this.$route.query.menuFlag || '1',                   //  默认显示 个股
        checkStatus:  this.$route.query.checkStatus ||'0',               //  默认checkbox都没有选中
        left: '我的个股调仓委托',
        right: '我的组合调仓委托',
        userCode: '',
        gameId: ''
      }
    },
    created(){
      this.userCode = LocalDAO.getUserCode();                              //取得用户ID
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.$router.replace({ path: to.path, query: Object.assign({}, to.query)})
      })
    },
   beforeRouteEnter (to, from, next) {
     const { cleanStorage = '' } = from.query
     const extraQuery = !!cleanStorage && from.path.includes('trade')
        ? { cleanStorage } : {}
     if (!!cleanStorage) {
       next(vm => {
         vm.$router.replace({ path: to.path, query: Object.assign({}, to.query, extraQuery) })
       })
     } else {
       next()
     }
   },
//
//    beforeRouteUpdate (to, from, next) {
//      const { gameId = '' } = to.query
//      if (!!gameId) {
//        this.gameId = gameId
//        this.$route.query.gameId = gameId
//      }
//      console.log(this.$route)
//    },

    mounted: function () {                                                      /*监听menuFlag*/
      this.$root.eventHub.$on('toggle', (menuFlag)=> {
        this.menuFlag = menuFlag;
        let kv = {"usercode": LocalDAO.getUserCode()}
        let eventId = ''
        if (menuFlag == 1) {
          eventId = '20008'
        } else if (menuFlag == 2) {
          eventId = '20009'
        }
        if (eventId !== '') {
          TDAPP.onEvent(eventId,"",kv)
          TDAPP.send()
        }
      })
      this.$root.eventHub.$on('check_to_index',(checkStatus)=>{ //监控点击check事件，但避免与子组件'check’的监控事件名重复
        this.checkStatus = checkStatus
      })
    }
  }
</script>

<style scoped>
  .position-main {
    overflow: scroll;
  }
</style>
